<template>
  <contents :heightInclude="['navBar']" class="openWallet_page">
    <view v-if="status" class="status_box" :style="statusStyle[status]">
      <image v-if="status === 1" class="statue_icon" src="@/static/images/wallet_success.png" />
      <image v-if="status === 2" class="statue_icon" src="@/static/images/wallet_error.png" />
      <view class="statue_msg">{{ status === 1 ? '恭喜您,您的资料已通过审核,钱包已开通' : '资料审核失败,请核对并修改信息后,重新提交' }}</view>
    </view>

    <u-form
      :model="form"
      ref="form"
      label-width="250"
      :label-style="{ paddingRight: '15rpx' }"
    >
      <u-form-item required label="企业名称" prop="name">
        <u-input
          v-model="form.name"
          placeholder="请输入企业名称"
          maxlength="100"
        />
      </u-form-item>
      <u-form-item required label="社会信用代码" prop="busPermitId">
        <u-input
          v-model="form.busPermitId"
          placeholder="请输入社会信用代码"
          maxlength="100"
        />
      </u-form-item>
      <u-form-item required label="法人姓名" prop="legalPersonName">
        <u-input
          v-model="form.legalPersonName"
          placeholder="请输入法人姓名"
          maxlength="100"
        />
      </u-form-item>
      <u-form-item required label="法人身份证号码" prop="cardNo">
        <u-input
          v-model="form.cardNo"
          placeholder="请输入法人身份证号码"
          maxlength="100"
        />
      </u-form-item>
      <u-form-item required label="支付密码" prop="password">
        <u-input
          type="password"
          :password-icon="false"
          v-model="form.password"
          placeholder="请输入支付密码"
          maxlength="6"
        />
      </u-form-item>
      <u-form-item required label="确认密码" prop="repassword">
        <u-input
          type="password"
          :password-icon="false"
          v-model="form.repassword"
          placeholder="请输入确认密码"
          maxlength="6"
        />
      </u-form-item>
      <u-form-item required label="开户行名称" prop="acctBankName">
        <u-input
          v-model="form.acctBankName"
          placeholder="请输入开户行名称"
          maxlength="100"
        />
      </u-form-item>
      <u-form-item required label="开户行行号" prop="acctBankNo">
        <u-input
          v-model="form.acctBankNo"
          placeholder="请输入开户行行号"
          maxlength="100"
        />
      </u-form-item>
      <u-form-item required label="银行卡号" prop="acctNo">
        <u-input
          v-model="form.acctNo"
          placeholder="请输入银行卡号"
          maxlength="100"
        />
      </u-form-item>
      <u-form-item required label="银行卡预留手机号" prop="mobile">
        <u-input
          v-model="form.mobile"
          placeholder="请输入银行卡预留手机号"
          maxlength="100"
        />
      </u-form-item>
    </u-form>

    <SubmitBtn @click="submit" />
  </contents>
</template>
<script>
import SubmitBtn from '@/components/submitBtn'
import { openWallet, getMyWalletInfo } from '@/api/http/wallet'
export default {
  components: {
    SubmitBtn
  },
  data() {
    const required = [
      {
        required: true,
        message: '此项不能为空',
        trigger: 'blur'
      }
    ]
    return {
      statusStyle: {
        1: 'background-color: #E5FFF0; color: #59C187;',
        2: 'background-color: #FFEAE5; color: #FF7373;'
      },
      status: null,
      form: {},
      rules: {
        name: required,
        busPermitId: [
          required,
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.enOrNum(value)
            },
            message: "社会信用代码格式不正确",
            trigger: 'blur'
          }
        ],
        legalPersonName: required,
        cardNo: [
          required,
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value)
            },
            message: "身份证格式不正确",
            trigger: 'blur'
          }
        ],
        password: [
          required,
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.digits(value)
            },
            message: "密码只能为6位纯数字",
            trigger: 'blur'
          }
        ],
        repassword: [
          required,
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.digits(value)
            },
            message: "密码只能为6位纯数字",
            trigger: 'blur'
          }
        ],
        acctBankNo: [
          required,
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.digits(value)
            },
            message: "开户行行号只能为纯数字",
            trigger: 'blur'
          }
        ],
        acctNo: [
          required,
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.digits(value)
            },
            message: "银行卡号只能为纯数字",
            trigger: 'blur'
          }
        ],
        mobile: [
          required,
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: "手机号格式不正确",
            trigger: 'blur'
          }
        ],
      }
    }
  },
  onLoad() {
    this.getInfo()
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    async getInfo() {
      const res = await getMyWalletInfo()
      if (res.code === 200 && res.data) {
        this.form = res.data
        this.status = 1
      }
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        const res = await openWallet({
          ...this.form,
          type: 2
        })
        uni.showToast({
          icon: 'none',
          title: res.message
        })
        if (res.code === 200) {
          setTimeout(() => {
            uni.navigateBack()
          }, 700)
        } else [
          this.status = 2
        ]
      })
    }
  }
}
</script>
<style lang="scss">
.openWallet_page {
  .status_box {
    padding: 40rpx 30rpx;
    display: flex;
    margin-bottom: 20rpx;
    .statue_icon {
      width: 42rpx;
      height: 42rpx;
      margin-right: 16rpx;
    }
    .statue_msg {
      flex: 1;
      line-height: 42rpx;
    }
  }
  .u-form {
    padding: 0 30rpx;
    background-color: #fff;
  }
}
</style>